<script setup lang='ts'>
import { ref } from 'vue'
import { getClassAll, type IClass } from '@/api/classApi';
import { getStudentAll, addStudnet } from '@/api/studentApi';
import { ElMessage } from 'element-plus';

defineOptions({
  name: 'VStudetList',
})

const classList = ref<IClass[]>([])
async function fetchClassAll() {
  const result = await getClassAll()
  classList.value = result.data as IClass[]
}

fetchClassAll()

const studentList = ref([])
async function fetchStudentAll() {
  const result = await getStudentAll({
    "class_id": 18,
    "page": 1,
    "limit": 10
  })
  console.log(result);
}

// fetchStudentAll()


const studentForm = ref({
  classId: '',
  nickname: '',
  account: '',
  password: ''
})
const dialogVisible = ref(false)

const handleAddStudent = async () => {
  // console.log('添加学生')
  const { code, msg } = await addStudnet(studentForm.value)
  if (code === 2000) {
    // fetchStudentAll()
    dialogVisible.value = false
    ElMessage.success(msg)
  } else {
    ElMessage.error(msg)
  }

}

</script>

<template>
  <div class='container'>
    <el-button type="primary" @click="dialogVisible = true">添加学生</el-button>
    <el-table :data="studentList" style="width: 100%">
      <el-table-column label="序号" type="index" width="180" />
      <el-table-column prop="nickname" label="学生名称" width="180" />
      <el-table-column prop="nickname" label="操作" width="180">
        <template #default="{ row }">
          <el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加面板 -->
    <el-dialog title="添加学生" v-model="dialogVisible">
      <el-form :model="studentForm" label-width="80px">
        <el-form-item label="学生姓名">
          <el-input v-model="studentForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="选择班级">
          <el-select v-model="studentForm.classId" placeholder="Select" size="large" style="width: 240px">
            <el-option v-for="item in classList" :key="item.id" :label="item.nickname" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="登录账号">
          <el-input v-model="studentForm.account"></el-input>
        </el-form-item>
        <el-form-item label="登录密码">
          <el-input v-model="studentForm.password"></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleAddStudent">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang='scss'></style>